import React from "react";
import QuestingSelecter from "../../../../Component/QuestingSelecter";
import QuestionAnswer from "../../../../Component/QuestionAnswer";
import { Button } from 'antd';

import './index.css';
import QuestionServer from "../../../../Server/Study/QuestionServer";

export default class  extends React.Component{
    
    constructor(props){
        super();
        let id=props.match.params.id;
        let number=props.match.params.number;
        let prevNumber=Number(number)-1;
        let nextNumber=Number(number)+1;
        let answer="";
        let questionTitle="";
        let answers=[];
        let difficulty=0;
        let parseText="";

        let totalCount=0;
        this.state={
            questionTitle,
            answer,
            answers,
            difficulty,
            parseText,
            number,
            id,
            prevNumber,
            nextNumber,
            totalCount
        };
        this.GetData(id,number);
        QuestionServer.SelectQuestioncount(id)
        .then(response=>{
            this.setState({
                totalCount:Number(response.data)
            });
        })
    }
    GetData(id,number){
        let prevNumber=Number(number)-1;
        let nextNumber=Number(number)+1;
        let answer="";
        let questionTitle="";
        let answers=[];
        let difficulty=0;
        let parseText="";
        QuestionServer.SelectQuestionChapterNumberDetails(0,id,number)
        .then(response=>{
            let data=response.data;
            let pilot=response.data.PilotParse;
            questionTitle=data.QuestionNumber.questionTitle;
            answer=pilot.answer;
            difficulty=pilot.difficulty;
            parseText=pilot.parseText;
            data.PilotAnswers.forEach(item => {
                answers.push( {value:item.answerText,key:item.options});
            });

            this.setState({
                questionTitle,
                answer,
                answers,
                difficulty,
                parseText,
                prevNumber,
                nextNumber
            })
        });
    }
    Prev(){
        let url=`/ItemBankDeatil/${this.state.id}/${this.state.prevNumber}`;
        
        if(this.state.prevNumber<=0){
            return;
        }
        this.setState({
            number:this.state.prevNumber
        },()=>{
            this.GetData(this.state.id,this.state.number);
        });
        this.props.history.push({pathname:url});
    }
    Next(){
        let url=`/ItemBankDeatil/${this.state.id}/${this.state.nextNumber}`;
        if(this.state.nextNumber>this.state.totalCount){
            return;
        }
        this.setState({
            number:this.state.nextNumber
        },()=>{
            this.GetData(this.state.id,this.state.number);
        });
        this.props.history.push({pathname:url});
    }
    render(){
        return(
            <div className="Courseware_Body">
                <div >
                    <QuestingSelecter needBGColor={false} isDisabled={true} selectedValue={this.state.answer} 
                     type="checkbox" number={this.state.number} question={this.state.questionTitle} answers={this.state.answers}/>
                </div>
                <div>
                    <QuestionAnswer answerCode={this.state.answer} desc={this.state.parseText} difficulty={this.state.difficulty}/>
                </div>
                <div className="ItemBankDetail_BtnContainer">
                    <span>
                        <Button type="default" shape="round" size="large" onClick={e=>this.Prev(e)}>
                            <span className="ItemBankDetail_BtnText">上一题</span>
                        </Button>
                    </span>
                    <span className="ItemBankDetail_BtnRight">
                        <Button type="primary" shape="round" size="large" onClick={e=>this.Next(e)}>
                            <span className="ItemBankDetail_BtnText">下一题</span>
                        </Button>
                    </span>
                </div>
            </div>
            
        )
    }
}